<template>
  <view class="res-page">
    <image class="headContent-bg" :src="$getImg('iassCashier/resultbg.png')"></image>
    <view class="pay-res">
      <view class="flexbox res-text">
        <image class="icon-img" v-if="resObj" :src="$getImg(resObj.icon)" mode="aspectFill"></image>
        <view class="text-font">{{resObj.text}}</view>
      </view>
      <view class="flexbox res-text" style="margin-bottom: 50rpx;">
        <view>￥</view>
        <view class="text-totalFee">{{$toFixed(payRes.totalFee)}}</view>
      </view>
      <view class="order-info">
        <view class="info-title">
          商家信息
        </view>
        <view class=" info-content">
          {{payRes.shopName}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    queryStringify,
    isEmpty,
    debounce
  } from "@/common/util.js"
  import {
    closeOrder
  } from "./api/pay.js";

  const icons = {
    '1': {
      icon: 'iassCashier/success.png',
      text: '支付成功'
    },
    '2': {
      icon: 'iassCashier/cancel.png',
      text: '支付取消'
    },
    '3': {
      icon: 'iassCashier/cancel.png',
      text: '支付失败'
    },
  }
  export default {
    data() {
      return {
        payRes: {
          paycode: '',
          totalFee: '',
          shopName: '',
          orderNo: '',
          mchntCd: '',
        }
      };
    },
    computed: {
      resObj() {
        let res = isEmpty(this.payRes.paycode) ? {
          text: ''
        } : icons[this.payRes.paycode];
        uni.setNavigationBarTitle({
          title: res.text
        })
        return res
      }
    },
    onLoad(options) {
      uni.hideHomeButton()
      uni.clearStorageSync()
      Object.keys(this.payRes).forEach(key => {
        this.payRes[key] = options[key]
      })
      if (this.payRes.paycode == "2") {
        this.closeOrderByPaycode()
      }
    },
    methods: {
      async closeOrderByPaycode() {
        try {
          let params = {
            "orderNo": this.payRes.orderNo,
            "outOrderNo": '',
            "mchId": this.payRes.mchntCd,
            "shopId": '',
            "staffId": '',
            "isCancelPayment": '1',
          }
          let res = await closeOrder(params)
        } catch (err) {
          this.$toast(err.respMsg || '系统异常')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .res-page {
    position: relative;
    min-height: 100vh;
    background-color: #fff;

    .headContent-bg {
      display: block;
      height: 350rpx;
      width: 100%;
    }

    .pay-res {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 60rpx 40rpx;
      box-sizing: border-box;

      .flexbox {
        display: flex;
        align-items: center;
      }

      .res-text {
        font-size: 50rpx;
        color: #fff;
        justify-content: center;
        margin-bottom: 30rpx;

        .icon-img {
          display: block;
          width: 60rpx;
          height: 60rpx;
          margin-right: 10rpx;
        }

        .text-font {
          font-size: 40rpx;
          line-height: 50rpx;
        }

        .text-totalFee {
          font-size: 72rpx;
          line-height: 84rpx;
        }
      }

      .order-info {
        background: #FFFFFF;
        border-radius: 16rpx;
        padding: 30rpx;
        box-shadow: 0 8rpx 20rpx #ebedf0;

        .info-title {
          color: #8a8a8a;
          font-size: 32rpx;
          line-height: 42rpx;
        }

        .info-content {
          color: #333;
          font-size: 32rpx;
          line-height: 42rpx;
          margin-top: 16rpx;
          word-break: break-all;
        }
      }

    }
  }
</style>